<template>
	<view class="content">
		<view class="search-container">
			<!-- 搜索框 -->
			<view class="search-box">
				<up-search placeholder="请输入关键字" v-model="searchKeyword" :showAction="false" shape="square"
					:input-style="{ fontSize: '28rpx' }" :clearable="true"
					@search="debounceSearch(searchKeyword)"></up-search>
			</view>

			<!-- 搜索结果 -->
			<transition name="fade">
				<view v-if="isLoading" class="search-results">
					<view v-for="(item,index) in data.searchList" :key="index" class="result-item"
						@click="skipDetail(item.id,item.title)">
						<text class="result-text">{{ item.title }}</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>

					<!-- 空状态 -->
					<view v-if="data.searchList.length === 0" class="empty-tips">
						<uni-icons type="search" size="24" color="#ccc" />
						<text>没有找到相关结果</text>
					</view>
				</view>
			</transition>

			<!-- 错误提示 -->
			<view v-if="error" class="error-message">
				<uni-icons type="info" size="18" color="#fff" />
				<text>{{ error }}</text>
			</view>
		</view>
		<!-- 轮播图优化 -->
		<view class="swiper-container">
			<swiper :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.4)"
				indicator-active-color="#fff" circular :interval="3000">
				<swiper-item v-for="(item, index) in 4" :key="index" class="swiper-item">
					<view class="ad-box gradient-bg">
						<uni-icons type="notification" size="48" color="#fff"></uni-icons>
						<text class="ad-text">优质广告位招租</text>
						<text class="ad-subtext">联系电话: 400-123-4567</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<up-divider text="精选博客"></up-divider>
		<!-- 热门文章 -->
		<view class="article">
			<!-- 结构优化 -->
			<view class="article-section">
				<!-- 标题区域 -->
				<view class="section-header">
					<view class="header-title">
						<text class="decor-line"></text>
						<text class="title-text">生活博客</text>
					</view>
					<view class="more-btn" @click="handleMore(0)">
						<text>更多</text>
						<uni-icons type="right" size="14" color="#999" />
					</view>
				</view>

				<!-- 滚动列表 -->
				<view class="scroll-container">
					<up-scroll-list :indicator="true" indicator-color="rgba(253,84,126,0.2)"
						indicator-active-color="#fd547e">
						<view v-for="(item,index) in data.life" :key="item.id" class="article-card"
							@click="skipDetail(item.id,item.title)">
							<image class="card-image" :src="item.image" mode="aspectFill" />
							<view class="card-content">
								<text class="article-title">{{item.title}}</text>
								<view class="category-tag">{{item.category.title}}</view>
							</view>
						</view>
					</up-scroll-list>
				</view>
			</view>
			<view class="article-section">
				<!-- 标题区域 -->
				<view class="section-header">
					<view class="header-title">
						<text class="decor-line"></text>
						<text class="title-text">技术博客</text>
					</view>
					<view class="more-btn" @click="handleMore(1)">
						<text>更多</text>
						<uni-icons type="right" size="14" color="#999" />
					</view>
				</view>

				<!-- 滚动列表 -->
				<view class="scroll-container">
					<up-scroll-list :indicator="true" indicator-color="rgba(253,84,126,0.2)"
						indicator-active-color="#fd547e">
						<view v-for="(item,index) in data.ablity" :key="item.id" class="article-card"
							@click="skipDetail(item.id,item.title)">
							<image class="card-image" :src="item.image" mode="aspectFill" />
							<view class="card-content">
								<text class="article-title">{{item.title}}</text>
								<view class="category-tag">{{item.category.title}}</view>
							</view>
						</view>
					</up-scroll-list>
				</view>
			</view>
			<view class="article-section">
				<!-- 标题区域 -->
				<view class="section-header">
					<view class="header-title">
						<text class="decor-line"></text>
						<text class="title-text">热门文章</text>
					</view>
					<view class="more-btn" @click="handleMore(2)">
						<text>更多</text>
						<uni-icons type="right" size="14" color="#999" />
					</view>
				</view>
			</view>
			<view class="article_hot">
				<up-waterfall v-model="data.hotList" :column-gap="15" :left-gap="15" :right-gap="15">
					<template v-slot:left="{leftList}">
						<view v-for="(item, index) in leftList" :key="index" class="waterfall-card"
							@click="skipDetail(item.id,item.title)">
							<up-lazy-load threshold="-450" border-radius="12" :image="item.image" class="card-image">
								<view class="image-placeholder"></view>
							</up-lazy-load>
							<view class="card-body">
								<text class="title">{{item.title}}</text>
								<view class="meta">
									<text class="date">{{item.createdAt}}</text>
									<view class="likes">
										<uni-icons type="hand-up-filled"
											:color="item.likesCount > 0 ? '#fd547e' : '#cacaca'" size="14" />
										<text>{{item.likesCount || 0}}</text>
									</view>
								</view>
								<view class="category">{{item.category.title}}</view>
							</view>
						</view>
					</template>

					<template v-slot:right="{rightList}">
						<view v-for="(item, index) in rightList" :key="index" class="waterfall-card"
							@click="skipDetail(item.id,item.title)">
							<up-lazy-load threshold="-450" border-radius="12" :image="item.image" class="card-image">
								<view class="image-placeholder"></view>
							</up-lazy-load>
							<view class="card-body">
								<text class="title">{{item.title}}</text>
								<view class="meta">
									<text class="date">{{item.createdAt}}</text>
									<view class="likes">
										<uni-icons type="hand-up-filled"
											:color="item.likesCount > 0 ? '#fd547e' : '#cacaca'" size="14" />
										<text>{{item.likesCount || 0}}</text>
									</view>
								</view>
								<view class="category">{{item.category.title}}</view>
							</view>
						</view>
					</template>
				</up-waterfall>

				<view v-if="data.empty" class="end-tips">
					<uni-icons type="checkmarkempty" size="18" color="#ccc" />
					<text>已经到底了</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getAbilityArticle,
		getLifeArticle,
		getHotArticle,
		getArticles
	} from '../../api/api.js'
	import {
		reactive,
		ref,
		watch,
		onUnmounted
	} from 'vue'

	// 登录验证
	const LoginValid = () => {
		// 如果本地缓存没有token，跳转到登录界面
		let token = uni.getStorageSync('token')
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login',
				success: res => {
					uni.showToast({
						title: '请先登录哟亲',
						icon: 'none'
					})
				},
				fail: () => {
					uni.showToast({
						title: '跳转失败',
						icon: 'none'
					})
				}
			});
		}
	}
	const data = reactive({
		ablity: [],
		life: [],
		hotList: [],
		currentPage: 1,
		pageSize: 10,
		empty: false,
		searchList: []
	})

	// 响应式搜索关键词
	const searchKeyword = ref('');

	// 加载状态
	const isLoading = ref(false);

	// 错误信息
	const error = ref(null);

	// 防抖定时器
	let debounceTimer = null;

	// 实际搜索函数
	const performSearch = async (keyword) => {
		console.log(keyword);
		await getArticles({
			title: keyword,
			pageSize: 13
		}).then(res => {
			isLoading.value = true
			data.searchList = res.articles
			console.log(res);
		})
	};

	// 防抖处理函数
	const debounceSearch = (keyword) => {
		// 清除之前的定时器
		clearTimeout(debounceTimer);

		// 设置新的定时器
		debounceTimer = setTimeout(() => {
			// 执行前进行有效性检查
			if (keyword.trim().length > 0) {
				performSearch(keyword.trim());
			} else {
				isLoading.value = false
			}
		}, 500); // 500ms 防抖延迟
	};

	// 监听搜索关键词变化
	watch(searchKeyword, (newVal) => {
		// 触发防抖搜索
		debounceSearch(newVal);
	});


	// 组件卸载时清理
	onUnmounted(() => {

	});
	// 跳转详情页
	const skipDetail = (id, title) => {
		isLoading.value = false
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}&title=${title}`
		})
		searchKeyword.value = ''
	}
	onShow(() => {
		LoginValid(); // 登录验证
		// 获取文章列表数据
		getAbilityArticle({}).then(res => {
			console.log(res.articles);
			data.ablity = res.articles
		})
		getLifeArticle({}).then(res => {
			console.log(res.articles);
			data.life = res.articles
		})
		getHotArticle({}).then(res => {
			console.log(res.articles);
			data.hotList = res.articles
		})
	})

	// 页面触底之后触发
	onReachBottom(() => {
		if (!data.empty) {
			data.currentPage++
			console.log("页面触底了·····");
			getHotArticle({
				currentPage: data.currentPage,
				pageSize: data.pageSize
			}).then(res => {
				if (!res.articles.length) {
					data.empty = true
					return
				}
				res.articles.forEach(item => {
					data.hotList.push(item)
				})

			})
		}
	})

	// 跳转到更多页面
	const handleMore = (type) => {
		console.log(type);
		uni.navigateTo({
			url:`/pages/articleMore/articleMore?type=${type}`
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;

		// 搜索容器
		.search-container {
			position: relative;
			padding: 20rpx 30rpx;
			background: #fff;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

			.search-box {
				position: relative;
				z-index: 2;

				/* 修改uview搜索框默认样式 */
				:deep(.u-search__content) {
					border-radius: 12rpx !important;
					background: #f5f5f5 !important;
				}
			}

			// 搜索结果
			.search-results {
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				right: 30rpx;
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				z-index: 999;
				max-height: 60vh;
				overflow-y: auto;

				.result-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 30rpx;
					border-bottom: 1rpx solid #eee;
					transition: all 0.3s;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background: #f8f8f8;
					}

					.result-text {
						font-size: 28rpx;
						color: #333;
						text-overflow: ellipsis;
						flex: 1;
						margin-right: 20rpx;
					}
				}

				.empty-tips {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40rpx;
					color: #999;
					font-size: 26rpx;

					text {
						margin-left: 12rpx;
					}
				}
			}

			// 错误提示
			.error-message {
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				right: 30rpx;
				background: #ff4d4f;
				color: #fff;
				padding: 20rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				animation: shake 0.4s;

				text {
					margin-left: 10rpx;
				}
			}
		}

		// 动画效果
		@keyframes shake {
			0% {
				transform: translateX(4rpx);
			}

			20% {
				transform: translateX(-4rpx);
			}

			40% {
				transform: translateX(4rpx);
			}

			60% {
				transform: translateX(-4rpx);
			}

			80% {
				transform: translateX(4rpx);
			}

			100% {
				transform: translateX(0);
			}
		}

		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 0.3s;
		}

		.fade-enter-from,
		.fade-leave-to {
			opacity: 0;
		}

		/* 轮播图优化 */
		.swiper-container {
			margin: 0 20rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);

			.swiper-item {
				.ad-box {
					height: 300rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #fff;

					.ad-text {
						font-size: 36rpx;
						margin: 20rpx 0 12rpx;
						font-weight: 500;
					}

					.ad-subtext {
						font-size: 24rpx;
						opacity: 0.9;
					}
				}

				.gradient-bg {
					background: linear-gradient(135deg, #fd547e, #ff8e7a);
				}
			}
		}

		.article {

			.article-section {
				margin: 40rpx 0;
				padding: 0 30rpx;
			}

			// 标题区域
			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.header-title {
					display: flex;
					align-items: center;

					.decor-line {
						width: 6rpx;
						height: 32rpx;
						background: #fd547e;
						margin-right: 16rpx;
						border-radius: 4rpx;
					}

					.title-text {
						font-size: 34rpx;
						font-weight: 600;
						color: #333;
					}
				}

				.more-btn {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #999;

					uni-icons {
						margin-left: 8rpx;
					}
				}
			}

			// 滚动容器
			.scroll-container {
				padding: 20rpx 0;

				.article-card {
					width: 380rpx;
					margin-right: 30rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.98);
					}
				}

				.card-image {
					width: 100%;
					height: 200rpx;
					background: #f5f5f5;
					transition: transform 0.3s;
				}

				.card-content {
					padding: 20rpx;

					.article-title {
						max-height: 70rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 28rpx;
						line-height: 1.4;
						color: #333;
						margin-bottom: 16rpx;
					}
				}

				.category-tag {
					display: inline-block;
					padding: 6rpx 16rpx;
					background: rgba(253, 84, 126, 0.1);
					color: #fd547e;
					font-size: 22rpx;
					border-radius: 8rpx;
				}
			}

			.article_hot {
				padding: 10rpx;
				box-sizing: border-box;

				// 瀑布流卡片
				.waterfall-card {
					margin: 0 10rpx;
					background: #fff;
					position: relative;
					border-radius: 16rpx;
					overflow: hidden;
					margin-bottom: 30rpx;
					box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
					transition: all 0.2s ease;

					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
					}
				}

				// 图片区域
				.card-image {
					width: 100%;
					height: 360rpx;
					position: relative;

					.image-placeholder {
						width: 100%;
						height: 100%;
						background: linear-gradient(110deg, #f6f7f8 25%, #f9f9f9 50%, #f6f7f8 75%);
						background-size: 200% 100%;
						animation: loading 1.5s infinite;
					}
				}

				// 卡片内容
				.card-body {
					padding: 24rpx;

					.title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 28rpx;
						line-height: 1.4;
						color: #333;
						margin-bottom: 20rpx;
					}
				}

				// 元信息
				.meta {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.date {
						font-size: 24rpx;
						color: #999;
					}

					.likes {
						display: flex;
						align-items: center;
						gap: 8rpx;
						font-size: 24rpx;
						color: #666;
					}
				}

				// 分类标签
				.category {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background: rgba(253, 84, 126, 0.9);
					color: #fff;
					padding: 6rpx 16rpx;
					border-radius: 8rpx;
					font-size: 22rpx;
					backdrop-filter: blur(4px);
				}

				// 空状态
				.end-tips {
					text-align: center;
					padding: 40rpx;
					color: #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 12rpx;
				}

				@keyframes loading {
					0% {
						background-position: 200% 0;
					}

					100% {
						background-position: -200% 0;
					}
				}
			}
		}
	}
</style>